import React from 'react';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space, Select, InputNumber } from 'antd';
import type { InputNumberProps } from 'antd';

const onChange: InputNumberProps['onChange'] = (value) => {
    console.log('changed', value);
};
const onFinish = (values: any) => {
    console.log('Received values of form:', values);
};
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};
const PriceType: React.FC = () => (
    <Form
        name="dynamic_form_nest_item"
        onFinish={onFinish}
        style={{ maxWidth: 600 }}
        autoComplete="off"
    >
        <Form.List name="users">
            {(fields, { add, remove }) => (
                <>
                    {fields.map(({ key, name, ...restField }) => (
                        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                            <Form.Item
                                {...restField}
                                name={[name, '价格类型']}
                                rules={[{ required: true, message: '会员价格类型' }]}
                            >
                                <Select
                                    defaultValue="纯积分"
                                    style={{ width: 120 }}
                                    onChange={handleChange}
                                    options={[
                                        { value: '纯积分', label: '纯积分' },
                                        { value: '积分加钱', label: '积分加钱' },
                                        { value: '现金购买', label: '现金购买' },

                                    ]}
                                />
                            </Form.Item>
                            <Form.Item label="积分"
                                {...restField}

                                name={[name, '积分数量']}
                                rules={[{ required: true, message: '积分数量' }]}
                            >
                                <InputNumber min={0} defaultValue={0} onChange={onChange} placeholder="积分数量" />
                            </Form.Item>
                            <Form.Item label="现金"
                                {...restField}

                                name={[name, '现金价格']}
                                rules={[{ required: true, message: '现金价格' }]}
                            >
                                <InputNumber min={0} defaultValue={0} onChange={onChange} placeholder="现金价格" />
                            </Form.Item>
                            <MinusCircleOutlined onClick={() => remove(name)} />
                        </Space>
                    ))}
                    <Form.Item>
                        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                            添加价格类型
                        </Button>
                    </Form.Item>
                </>
            )}
        </Form.List>
        {/* <Form.Item>
            <Button type="primary" htmlType="submit">
                这个是组件自带的提交按钮，我先不删，方便后续改找到位置
            </Button>
        </Form.Item> */}
    </Form>
);

export default PriceType;